<template>
    <div class="home-container">
        <el-carousel  class="carousel">
            <el-carousel-item
                class="carousel-item"
                v-for="(item, idx) in carouselItems"
                :key="idx"
            >
                <div class="title">
                    {{ item.title }}
                </div>
              <img v-if="item.picture" :src="item.picture.url" :alt="item.title">
            </el-carousel-item>
        </el-carousel>
        <main>
            <h1>欢迎使用微光后台</h1>
            <router-link
                class="action-btn"
                :to="{ name: 'Login', query: { redirect: '/dashboard' } }"
                >去登陆</router-link
            >
        </main>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
const p1 = require('@/assets/p1.jpg')
const p2 = require('@/assets/p2.jpg')
const p3 = require('@/assets/p3.jpg')
export default defineComponent({
    setup() {
        const carouselItems = [
            {
                title: "图1",
                picture:{
                  url:p1
                }
            },
            {
                title: "图2",
                picture: {
                  url:p2
                }
            },
            {
                title: "图3",
                picture: {
                  url:p3
                }
            },
        ];
        return {
            carouselItems,
        };
    },
});
</script>
<style lang="scss" scoped>
.home-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    main {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        min-height: 100%;
        h1 {
            margin-top: 3rem;
            margin-bottom: 3rem;
        }

    }

    .carousel {
        top: 0;
        left: 0;
        width: 100%;

        clip-path: ellipse(100% 100% at 50% 0%);
        .carousel-item {
            background: rgb(201, 233, 252);
            .title {
                position: absolute;
                bottom: 2rem;
              text-shadow: 0 0 4px;
              color: rgba(255,255,255,0.6);
              font-size:20px;
                left: 50%;
                transform: translate(-50%,-50%);
            }
          img {
            display: block;
            width: 100%;
            height:100%;
            object-fit: cover;
          }
        }
    }

    .action-btn {
        text-decoration: none;
        color: rgb(238, 238, 238);
        padding: 10px 30px;
        border-radius: 30px;
        background: rgba($color: #7ba0e6, $alpha: 0.8);
        box-shadow: 0 4px 16px -8px rgba($color: #3d4f74, $alpha: 0.8);
        transition: 0.2s ease-in-out;
        &:hover {
            color: white;

            background: rgba($color: #2747b1, $alpha: 0.8);
            box-shadow: 0 4px 16px -4px rgba($color: #3d4f74, $alpha: 0.8);
        }
    }
}
</style>
